<template>
  <div class="common-layout">
    <el-container >
      <el-header>
        <el-input
            v-model="input1"
            style="width: 1200px"
            size="large"
            placeholder="请搜索你需要管理的功能"
            :prefix-icon="Search"
            @change="handleSearch"
        />

      </el-header>
      <el-main>
        <div class="card-container">
          <el-card  shadow="hover" class="card-el" v-for="(item,index) in newList " :key=index @click="routerto(item)">
            <p class="card-p">{{item.mangername}}</p>
              <img :src="item.mangerimg" alt="" class="card-image">
          </el-card>
        </div>


      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import {Search} from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
const routers=useRouter();
const input1 = ref('')
const mangerList=reactive([
  {
    mangername:'用户管理',
    mangerimg:'../src/assets/usermange.png',
    mangerurl:'/manager/usermanager'
  },
    {
      mangername:'订单管理',
      mangerimg:'../src/assets/订单.jpg',
      mangerurl:'/manager/ordermanager'

    },
    {
      mangername:'菜品管理',
      mangerimg:'../src/assets/菜品.jpg',
      mangerurl:'/manager/manageitem'

    },
    {
      mangername:'套餐管理',
      mangerimg:'../src/assets/套餐.png',
      mangerurl:'/manager/manaageitempack',
    },
    {
      mangername:'优惠券管理',
      mangerimg:'../src/assets/优惠卷.jpg',
      mangerurl:'/manager/couponmanager'

    },
    {
      mangername:'评论管理',
      mangerimg:'../src/assets/评论.jpg',
      mangerurl: '/manager/commentmanage'
    },
    {
      mangername:'店铺收益',
      mangerimg:'../src/assets/收益.jpg',
      mangerurl: '/manager/earningsmanage'

    },
  {
    mangername:'角色管理',
    mangerimg:'../src/assets/评论.jpg',
    mangerurl:'/manager/roleManager'
  },
  {
    mangername:'客户质询',
    mangerimg:'../src/assets/客服.png',
    mangerurl: '/manager/ManagerCustomer',
  },
  {
    mangername:'积分管理',
    mangerimg:'../src/assets/关于我们.jpg',
    mangerurl: '/manager/PointsManager',
  },
  {
    mangername:'充值管理',
    mangerimg:'../src/assets/关于我们.jpg',
    mangerurl: '/manager/RechargeManager',
  },
  {
    mangername:'轮播图管理',
    mangerimg:'../src/assets/客服.png',
    mangerurl: '/manager/imageManager'
  },
  {
    mangername:'电脑管理',
    mangerimg:'../src/assets/电脑管理.jpg',
    mangerurl: '/manager/computerManager',
  },
  {
    mangername:'关于我们',
    mangerimg:'../src/assets/关于我们.jpg',
  },
])
const routerto=(item)=>{
  console.log(item.mangerurl)
 routers.push({
   path:item.mangerurl
 })
}

const newList = reactive([
  {
    mangername:'用户管理',
    mangerimg:'../src/assets/usermange.png',
    mangerurl:'/manager/usermanager'
  },
  {
    mangername:'订单管理',
    mangerimg:'../src/assets/订单.jpg',
    mangerurl:'/manager/ordermanager'

  },
  {
    mangername:'菜品管理',
    mangerimg:'../src/assets/菜品.jpg',
    mangerurl:'/manager/manageitem'

  },
  {
    mangername:'套餐管理',
    mangerimg:'../src/assets/套餐.png',
    mangerurl:'/manager/manaageitempack',
  },
  {
    mangername:'优惠券管理',
    mangerimg:'../src/assets/优惠卷.jpg',
    mangerurl:'/manager/couponmanager'

  },
  {
    mangername:'评论管理',
    mangerimg:'../src/assets/评论.jpg',
    mangerurl: '/manager/commentmanage'
  },
  {
    mangername:'店铺收益',
    mangerimg:'../src/assets/收益.jpg',
    mangerurl: '/manager/earningsmanage'

  },
  {
    mangername:'角色管理',
    mangerimg:'../src/assets/评论.jpg',
    mangerurl:'/manager/roleManager'
  },
  {
    mangername:'客户质询',
    mangerimg:'../src/assets/客服.png',
    mangerurl: '/manager/ManagerCustomer',
  },
  {
    mangername:'积分管理',
    mangerimg:'../src/assets/关于我们.jpg',
    mangerurl: '/manager/PointsManager',
  },
  {
    mangername:'充值管理',
    mangerimg:'../src/assets/关于我们.jpg',
    mangerurl: '/manager/RechargeManager',
  },
  {
    mangername:'轮播图管理',
    mangerimg:'../src/assets/客服.png',
    mangerurl: '/manager/imageManager'
  },
  {
    mangername:'电脑管理',
    mangerimg:'../src/assets/电脑管理.jpg',
    mangerurl: '/manager/computerManager',
  },
  {
    mangername:'关于我们',
    mangerimg:'../src/assets/关于我们.jpg',
  },
])
const handleSearch = () => {
  newList.length = 0
  mangerList.forEach((item, index) => {
    if (item.mangername.includes(input1.value)){
      newList.push(item)
    }
  })
}
</script>

<style scoped>
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  width: 100%;
  gap: 20px;
}
.common-layout {
  display: flex;
  flex-wrap: wrap;
}

.card-el{
  margin-left: 20px;
  margin-top: 20px;
  width: calc(25%);
  height: 220px;

  background-color: whitesmoke;
  border-radius: 10px;
  border: 1px solid black;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  cursor: pointer;
  transition: all .3s;
  margin-right: 10px;
}
.card-el:hover {
  transform: translateY(-5px);
  /* 如果需要增加更多悬停效果，比如改变颜色或透明度，可以在这里添加 */
  box-shadow: 0 4px 16px 0 rgba(0,0,0,10); /* 可选：增加悬停时的阴影深度 */
}
.card-image{
  width: 100px;
  height: 100px;
  margin-left: 85px;
  border-radius: 50%;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.card-p{
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 20px;
}

.card-button{
  width: 50px;
  margin-left: 110px;

  background-color: #409EFF;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  cursor: pointer;
}
</style>